<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<!--
 * @Author: 千锋爱佛僧
 * @公众号: 大前端私房菜
 * @Slogan: 千锋精品教程，好学得不像实力派！
-->
<template>
  <div class="job-item p-12 mb-8" @click="handleDetail">
    <div class="flex justify-between">
      <div class="flex items-center fs-22 c-gray">
        <img class="w-16 h-16 m-r-4" :src="jobdata.brandLogo" alt="" />
        {{ jobdata.brandName }}
      </div>
      <i class="iconfont icon-bookmark-o"></i>
    </div>
    <h2 class="fs-28">{{ jobdata.jobName }}</h2>
    <h3 class="fs-22 c-gray">
      {{ jobdata.cityName }}·{{ jobdata.areaDistrict }}
    </h3>
    <p class="fs-22 c-yellow">{{ jobdata.salaryDesc }}</p>
    <div>
      <i class="iconfont icon-browse"></i>
      230
      <i class="iconfont icon-renqun ml-4"></i>
      112
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import { JobType } from "../types/pro";

interface JobPropsType {
  jobdata: JobType;
}
const props = defineProps<JobPropsType>(); //此处的props目的是为了在ts区域得到props参数
const router = useRouter();
const handleDetail = () => {
  router.push(`/detail/${props.jobdata.objectId}`);
};
</script>

<style lang="scss" scoped>
.job-item {
  width: 28.4rem;
  height: 27.6rem;
  border: 1px solid rgba(238, 238, 238, 1);
  border-radius: 6px;
  flex-shrink: 0;
}
</style>
